<template>
  <header
    class="sticky top-0 before:absolute before:inset-0 before:backdrop-blur-md max-lg:before:bg-white/90 dark:max-lg:before:bg-gray-800/90 before:-z-10 z-30"
    :class="[
      props.variant === 'v2' || props.variant === 'v3'
        ? 'before:bg-white after:absolute after:h-px after:inset-x-0 after:top-full after:bg-gray-200 dark:after:bg-gray-700/60 after:-z-10'
        : 'max-lg:shadow-xs lg:before:bg-gray-100/90 dark:lg:before:bg-gray-900/90',
      props.variant === 'v2' ? 'dark:before:bg-gray-800' : '',
      props.variant === 'v3' ? 'dark:before:bg-gray-900' : '',
    ]"
  >
    <div class="px-4 sm:px-6 lg:px-8">
      <div
        class="flex items-center justify-between h-16"
        :class="
          props.variant === 'v2' || props.variant === 'v3'
            ? ''
            : 'lg:border-b border-gray-200 dark:border-gray-700/60'
        "
      >
        <!-- Header: Left side -->
        <div class="flex">
          <!-- Hamburger button -->
          <button
            class="text-gray-500 hover:cursor-pointer hover:text-gray-600 dark:hover:text-gray-400 lg:hidden"
            @click.stop="emit('toggle-sidebar')"
            aria-controls="sidebar"
            :aria-expanded="props.sidebarOpen"
          >
            <span class="sr-only">Open sidebar</span>
            <svg
              class="w-6 h-6 fill-current"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect x="4" y="5" width="16" height="2" />
              <rect x="4" y="11" width="16" height="2" />
              <rect x="4" y="17" width="16" height="2" />
            </svg>
          </button>
        </div>

        <!-- Header: Right side -->
        <div class="flex items-center space-x-3">
          <GithubButton />
          <Help align="right" />
          <ThemeToggle />
          <!-- Divider -->
          <hr class="w-px h-6 bg-gray-200 dark:bg-gray-700/60 border-none" />
          <SignOutButton />
          <!-- <UserMenu align="right" /> -->
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import GithubButton from '@/components/partials/GithubButton.vue'
import Help from '@/components/partials/DropdownHelp.vue'
import ThemeToggle from '@/components/partials/ThemeToggle.vue'
import SignOutButton from './SignOutButton.vue'

const emit = defineEmits(['toggle-sidebar'])

const props = defineProps({
  sidebarOpen: {
    type: Boolean,
    default: false,
  },
  variant: {
    type: String,
    default: 'v2',
  },
})
</script>
